<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="common/common.jsp"%>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>注册</title>
	<link rel="stylesheet" type="text/css" href="<%=path%>/css/common.css">
	<link rel="stylesheet" href="<%=path%>/css/register.css">
	<script type="text/javascript">
		function register() {
			$.ajax({
				url : "<%=path%>/registerController/register",
				dataType : "json",
				type : "post",
				data : $("#registerForm").serialize(),
				async : true,
				success : function (data) {
					if (data==1){
						toastr.success("注册成功")
						location.href = "login.jsp"
					}else if (data==0){
						toastr.error("验证码错误")
					}else if (data==2){
						toastr.error("用户名重复")
					}

				},
				error : function (e) {
					console.log(e);
					toastr.error("验证错误")
				}
			})
		}
		function isUserNameExists() {
			var username = $("#username").val()
			if (username!=null&&username!==""){
				$.ajax({
					url : "<%=path%>/registerController/isUserNameExists",
					dataType : "json",
					type : "post",
					data : {username:username},
					async : true,
					success : function (data) {
						if (data==1){
							toastr.error("用户名已存在")
						}else {
							toastr.success("用户名可用")
						}

					},
					error : function (e) {
						console.log(e);
						toastr.error("系统错误")
					}
				})
			}else {
				toastr.error("用户名为空")
			}


			// alert(username)
		}
		//图片点击事件
		function changeCheckCode(img) {
			img.src="${pageContext.request.contextPath}/loginController/checkCode?"+new Date().getTime();
		}
	</script>
</head>
<body>
<!--引入头部-->
<div id="header"></div>
<!-- 头部 end -->
<div class="rg_layout">
	<div class="rg_form clearfix">
		<div class="rg_form_left">
			<p>新用户注册</p>
			<p>USER REGISTER</p>
		</div>
		<div class="rg_form_center">

			<!--注册表单-->
			<form id="registerForm">
				<!--提交处理请求的标识符-->
				<input type="hidden" name="action" value="register">
				<table style="margin-top: 25px;">
					<tr>
						<td class="td_left">
							<label for="username">用户名</label>
						</td>
						<td class="td_right">
							<input type="text" id="username" name="username" placeholder="请输入账号" onblur="isUserNameExists()">
						</td>
					</tr>
					<tr>
						<td class="td_left">
							<label for="password">密码</label>
						</td>
						<td class="td_right">
							<input type="text" id="password" name="password" placeholder="请输入密码">
						</td>
					</tr>
					<tr>
						<td class="td_left">
							<label for="email">Email</label>
						</td>
						<td class="td_right">
							<input type="text" id="email" name="email" placeholder="请输入Email">
						</td>
					</tr>
					<tr>
						<td class="td_left">
							<label for="name">姓名</label>
						</td>
						<td class="td_right">
							<input type="text" id="name" name="name" placeholder="请输入真实姓名">
						</td>
					</tr>
					<tr>
						<td class="td_left">
							<label for="phone">手机号</label>
						</td>
						<td class="td_right">
							<input type="text" id="phone" name="phone" placeholder="请输入您的手机号">
						</td>
					</tr>
					<tr>
						<td class="td_left">
							<label for="sex">性别</label>
						</td>
						<td class="td_right gender">
							<input type="radio" id="sex" name="sex" value="1" checked> 男
							<input type="radio" name="sex" value="0"> 女
						</td>
					</tr>
					<tr>
						<td class="td_left">
							<label for="birthday">出生日期</label>
						</td>
						<td class="td_right">
							<input type="date" id="birthday" name="birthday" placeholder="年/月/日">
						</td>
					</tr>
					<tr>
						<td class="td_left">
							<label for="check">验证码</label>
						</td>
						<td class="td_right check">
							<input type="text" id="check" name="check" class="check">
							<img src="${pageContext.request.contextPath}/loginController/checkCode" height="32px" alt="" onclick="changeCheckCode(this)">

						</td>
					</tr>
					<tr>
						<td class="td_left">
						</td>
						<td class="td_right check">
							<input type="button" class="submit" value="注册" onclick="register()">
							<span id="msg" style="color: red;"></span>
						</td>
					</tr>
				</table>
			</form>
		</div>
		<div class="rg_form_right">
			<p>
				已有账号？
				<a href="<%=path%>/login.jsp">立即登录</a>
			</p>
		</div>
	</div>
</div>
<!--引入尾部-->
<div id="footer"></div>

</body>
</html>